本教程操作环境：windows7系统、jquery3.6版本、Dell G3电脑。
第一种：load，从服务器加载数据，并把返回的数据放入被选元素中
<script type="text/javascript">$(document).ready(function(){ $("#mybutton").click(function(){ $("#mydiv").load("haha.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success"){ alert("成功"); } if(statusTxt=="error"){ alert("失败："+xhr.status+":"+xhr.statusTxt); } }); });})</script>下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容， 加载到指定的 <div> 元素中：实例：$("#div1").load("demo_test.txt #p1");第二种：GET方式：
【资料图】
$(document).ready(function(){ $("#mybutton").click(function(){ $.get("haha.txt",null,function(data,status){ alert(data+":"+status); }); });});第三种：POST方式：
<script type="text/javascript"> $(document).ready(function() { $("#mybutton").click(function() { $.get("/Json/JsonServlet", { name:"我是谁", age:12 }, function(data, status) { alert(data + ":" + status); }); }); });</script>POST要和后台Servlet交互：
response.setCharacterEncoding("utf-8"); System.out.println(request.getParameter("name")); System.out.println(request.getParameter("age")); response.getWriter().println("你找到我了");后台输出：
我是谁12
要访问后台servlet也可以直接如此写地址：
$.get("JsonServlet",第四种：getJSON方式：
<script type="text/javascript"> $(document).ready(function() { $("#mybutton").click(function() { $.getJSON("JsonServlet", { name:"我是谁", age:12 }, function(json) { alert(json.name); $("#mydiv").html(json.name); }); }); });</script>返回的就直接是json格式的对象，无需JSON.parse的方法转换。
注意：不管是哪种方式后台都有两种方式和前台交互：
第一种后台交互：直接拼接字符串。
response.getWriter(). print("{\"name\":\"爱你\",\"age\":12}");第二种 传入JSON对象：
JSONObject jsonObject = new JSONObject("{"name":"爱你","age":12}");response.getWriter().print(jsonObject);相同的最终传递给前台的时候都默认以字符串的形式传递过去， 注意的是除了getJSON方式前台可以使用两种方式来将字符串转换成js对象：
1. eval（）函数 ：不推荐，有隐患 会执行其他js操作2. JSON.parse（）函数 ：推荐：只执行对象转换操作
你们是不是还要问 不是有五种吗 为啥子前面就讲了四种？
没错 还有一种：
第五种：jQuery.ajax()：
执行异步 HTTP (Ajax) 请求
该方法是 jQuery 底层 AJAX 实现，所有的 jQuery AJAX 方法都使用 ajax() 方法。 。简单易用的高层实现见 .get，.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
可以这么理解：
前四种是高级方法，是对ajax（）进行了封装，更加简洁。可以理解为Jquery和JavaScript之间的关系。
$.ajax的一般格式
$.ajax({ type: "POST", url: url ,data: data ,success: success ,dataType: dataType});$.ajax的参数描述
参数 描述url 必需。规定把请求发送到哪个 URL。data 可选。映射或字符串值。规定连同请求发送到服务器的数据。success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。dataType 可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。
举例：
<script type="text/javascript"> $(document).ready(function() { $("#mybutton").click(function() { $.ajax({ url : "/Json/JsonServlet", type : "POST", async : true, dataType : "json", data : { name : "前台数据", age : 12 }, success : function(result) { $("#mydiv").html(result.name); }, error : function(xhr) { alert("错误提示： " + xhr.status + " " + xhr.statusText); } }); }); });</script>后台：
request.setCharacterEncoding("utf-8"); System.out.println(request.getParameter("name")); System.out.println(request.getParameter("age"));后台输出：
前台数据12
注意： data还可以用字符串拼接：一样的效果 多个参数中间要用&分割
data : "name=前台数据string&age=12",
那什么时候使用呢？
$.post、$.get是一些简单的方法， 如果要处理复杂的逻辑，还是需要用到jQuery.ajax()该方法通常用于其他方法不能完成的请求，比如网址错误。
如果是表单提交的 可以参照我开头最后一个链接
方法六：表单的局部刷新（依附于表单）
序列化表单方法：
serialize():将表单内容序列化成一个字符串。
serializeArray()：将表单内容序列化成一个对象数组
这里只介绍：serialize()
看script：
<script type="text/javascript"> $(document).ready(function() { $("#mybutton").click(function() { //var frm=$("#form1").serializeArray(); var frm = $("#form1"); $.ajax({ url : frm.attr("action"), type : frm.attr("method"), async : true, data : frm.serialize(), //var data=$("#form1").serializeArray(); success : function(data) { alert("ok"); }, error : function(data) { alert(data.status); } }); }); });</script>form表单：
<form id="form1" action="${pageContext.request.contextPath}/ClassServlet" method="POST"> <input type="text" name="name" /> <input type="password" name="password" /> <input type="button" id="mybutton" value="点我" /> </form>注意：使用：serialize()
这时表单的按钮的type不可以是submit，否则自提交数据， 也就是自动刷新； 用Ajax的serialize()提交表单， 如果input的type为submit，提交时就会自动刷新， 所以，用serialize()提交表单的时候最好把type改为button.
【推荐学习：jQuery视频教程、web前端视频】
以上就是Jquery交互的方式都有哪些的详细内容，更多请关注php中文网其它相关文章！
关键词： jquery javascript
营业执照公示信息